<template>
  <div class="home">
    <swiper></swiper>
    <van-grid :column-num="3">
      <van-grid-item v-for='(item,index) in grids' :key='index' :text='item.title' :to='item.to'>
        <van-image :src="item.src" />
       <div class="title">{{item.title}}</div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import Swiper from '../../components/swiper/index'
import { getGrids } from '../../api/index'
export default {
  data () {
    return {
      title: '首页',
      grids: []
    }
  },
  created () {
    this.getGrids()
  },
  methods: {
    async getGrids () {
      const res = await getGrids()
      if (res.status === 200) {
        this.grids = res.data.message
      }
    }
  },
  components: {
    Swiper
  }
}
</script>

<style scoped lang='less'>
  .home{
    .title{
      color: #646566;
      font-size: 12px;
      margin-top: 10px;
    }
    .van-image{
      height: 60px;
      width:60px;
      // .van-image__img{
      //   height: 60px !important;
      //   width: 60px;
      // }
    }
  }
</style>
